import { observer } from 'mobx-react-lite';
import appleImageUrl from '../../images/apple.png';
import './style.scss';

function AppleItem({ apple }) {
  const { number, weight, eating } = apple;

  return (
    <div className="appleItem">
      <div className="apple">
        <img src={appleImageUrl} alt="" />
      </div>
      <div className="info">
        <div className="name">红苹果 - {number}号</div>
        <div className="weight">{weight}克</div>
      </div>
      <div className="btn-div">
        <button onClick={eating}> 吃掉 </button>
      </div>
    </div>
  );
}

export default observer(AppleItem);